<template>
  <div>
    <van-radio-group v-model="checked">
      <van-cell-group>
        <van-cell
          class="custom-title"
          title="我自己"
          clickable
          @click='changeRadio(0)'
        >
          <template #icon>
            <van-radio name="0"  />
          </template>
        </van-cell>
        <van-cell
          class="custom-title"
          title="所有人"
          clickable
          @click='changeRadio(1)'
        >
          <template #icon>
            <van-radio name="1" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <!-- 部门选择-复选 -->
    <van-checkbox-group v-model="checkboxChecked">
      <van-cell-group>
        <div
          v-for="item in teamList"
          :key="item"
        >
          <van-cell
            class="cell-list"
            :value="(item.employeeNum + '人')"
            is-link
            :arrow-direction="item.isDown"
            @click='onclick(item)'
          >
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">
                <van-checkbox :name="item.id" @click='onclick(item)' /> {{item.name}}
                <van-tag
                  v-if="item.addadmin"
                  type="danger"
                  color="#F3F4F5"
                  text-color="#333333"
                >{{item.addadmin || ''}}</van-tag>
              </span>
            </template>
          </van-cell>
          <!-- 人员内容 -->
          <div
            class="users"
            v-if="item.isDown == 'down'"
          >
            <div
              class="box"
              
            >
              <LabelsBox
                :data="item.users"
                @run-parent="getChild"
              ></LabelsBox>
            </div>
          </div>
        </div>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
import {
  RadioGroup,
  Radio,
  CellGroup,
  Cell,
  Tag,
  Collapse,
  CollapseItem,
  Checkbox,
  CheckboxGroup
} from "vant";
import { ref } from "vue";
import LabelsBox from "@/components/labelsBox.vue";
import httpRequest from "@/util/httpRequest";
/**
 * 部门&&小组 组件
 * teamList 
 * {
 *  id
 *  addadmin：负责人
 *  addtime：创建时间
    code: 
    name: "String", 部门名
    employeeNum: 人员数量
    }
 */
export default {
  name: "RadioList",
  props: {
    teamList: []
  },
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [CheckboxGroup.name]: CheckboxGroup,
    [Checkbox.name]: Checkbox,
    LabelsBox
  },
  data() {
    return {
      isDown: "down",
      checked: ref("0"),
      checkboxChecked: [],
      targetUserIds: [],
      beforRadio:0
    };
  },
  mounted() {},
  methods: {
    onclick(item) {
      this.checked = 'null';
      if(this.checkboxChecked.indexOf(item.id) < 0){
        this.checkboxChecked.push(item.id)
        // console.log('push :',this.checkboxChecked )
      }else{
        this.checkboxChecked.splice(this.checkboxChecked.indexOf(item.id), 1);
        // console.log('del :',this.checkboxChecked )
      }
      
      httpRequest
        .post("返回指定部门中所有用户列表", { deptId: item.id })
        .then(res => {
          if (res.result == "SUCCESS") {
            item.users = {
              titel: "",
              styleType: "B",
              status: 2,
              lebType: "sourceDeptIdArr",
              labels: res.data
            };
            item.isDown = item.isDown == "down" ? "up" : "down";
          }
        });
        this.$emit("changeRadio", {type:'isDept',targetDeptIds:this.checkboxChecked});
    },
    getChild(data) {
      this.checked = 'null';
      // console.log(data);
      this.$emit("changeRadio", {type:'isDeptUsers',targetDeptIds:this.checkboxChecked,targetUserIds:data.arr});
    },
    changeRadio(id) {
      this.checkboxChecked = [];
      this.beforRadio != id && this.id != 'null' ? this.checked= ref(id+'') : this.checked=('null');
      this.beforRadio = id;
      // console.log( this.checked)
      this.$emit("changeRadio", {type:'isPublic',isPublic:this.checked});
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" >
.custom-title {
  display: flex;
  div,
  .van-tag {
    margin-right: 10px;
  }
}
.box{
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
}
</style>
